<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>每日心情采集器</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js" defer></script>
</head>
<body>
    <header>
        <h1>每日心情采集器</h1>
        <p>记录你的心情，发现你的模式，改善你的生活</p>
    </header>

    <main>
        <section id="mood-form-section">
            <h2>记录今日心情</h2>
            <form id="mood-form">
                <div class="form-group">
                    <label>选择心情:</label>
                    <div class="mood-selector">
                        <button type="button" class="mood-btn" data-mood="happy">😊</button>
                        <button type="button" class="mood-btn" data-mood="neutral">😐</button>
                        <button type="button" class="mood-btn" data-mood="sad">😢</button>
                        <button type="button" class="mood-btn" data-mood="angry">😡</button>
                    </div>
                    <input type="hidden" id="selected-mood" name="mood" required>
                </div>

                <div class="form-group">
                    <label for="mood-description">心情描述:</label>
                    <textarea id="mood-description" name="description" placeholder="今天发生了什么？你有什么感受？" required></textarea>
                </div>

                <div class="form-group">
                    <label>标签 (可选):</label>
                    <div class="tag-selector">
                        <button type="button" class="tag-btn" data-tag="工作">工作</button>
                        <button type="button" class="tag-btn" data-tag="生活">生活</button>
                        <button type="button" class="tag-btn" data-tag="健康">健康</button>
                        <button type="button" class="tag-btn" data-tag="社交">社交</button>
                        <input type="text" id="custom-tag" placeholder="自定义标签">
                    </div>
                    <input type="hidden" id="selected-tags" name="tags">
                </div>

                <button type="submit">记录心情</button>
            </form>
        </section>

        <section id="history-section">
            <h2>历史记录</h2>
            <div class="filter-controls">
                <label>筛选:</label>
                <select id="mood-filter">
                    <option value="all">所有心情</option>
                    <option value="happy">😊 开心</option>
                    <option value="neutral">😐 平静</option>
                    <option value="sad">😢 伤心</option>
                    <option value="angry">😡 生气</option>
                </select>
                <button id="generate-insights">生成洞察</button>
                <button id="export-csv">导出为CSV</button>
                <button id="clean-data">清洗CSV数据</button>
            </div>
            <div id="history-list">
                <!-- 历史记录将在这里显示 -->
            </div>
        </section>

        <section id="daily-report-section">
            <h2>今日心情报告</h2>
            <div id="daily-report-content">
                <p>暂无今日记录，请先记录今日心情。</p>
            </div>
            <div class="report-buttons">
                <button id="generate-daily-report">生成今日报告</button>
                <button id="export-markdown-report">导出为Markdown</button>
            </div>
        </section>

        <section id="chart-section">
            <h2>心情趋势图</h2>
            <div class="chart-container">
                <canvas id="moodChart"></canvas>
            </div>
        </section>

        <section id="insights-section">
            <h2>情绪洞察</h2>
            <div id="insights-content">
                <!-- 洞察内容将在这里显示 -->
            </div>
        </section>
    </main>

    <script src="script.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</body>
</html>